<template>
	<div class="trade-position-page">
		<div class="overview">
			<!-- <img v-if="gameId" src="~assets/images/trade/monibisai.png" class="trade_mark_bg" alt=""> -->
			<img src="~assets/images/trade/monijiaoyi.png" class="trade_mark_bg" alt="">
			<div class="row one">

				<div class="col-xs-6">
					<div class="key">日盈亏率</div>
					<div id="dayRate" class="value income" :class="dayRate<0?'negative' : 'positive'">{{dayRate}}%</div>
				</div>
				<div>
					<div class="key">总资产</div>
					<div id="fundBalance" class="value">{{fundBalance}}</div>
				</div>
			</div>
			<div class="row two">
				<div>
					<div class="key">可用资金</div>
					<div id="enableBalance" class="value">{{enableBalance}}</div>
				</div>
			</div>
		</div>
		<!--header-->
		<div class="wave"></div>
		<!--wave-->

		<toggle-tab style="z-index: 98;background-color: #f2f2f2;" :leftText="left" :rightText="right" :dis="dis"/>

		<group-clearance-modal></group-clearance-modal>                   <!--一键清仓-->
	  <group-set-name-modal></group-set-name-modal>                   <!--改名称-->
	  <group-set-name-succ-modal></group-set-name-succ-modal>

		<!--taggle-->
		<div class="position-main">
			<stock-position v-if="menuFlag==1"></stock-position>
			<group-position v-if="menuFlag==2"></group-position>
		</div>
	</div>
	</div>
</template>

<script>
	import ToggleTab from '../ToggleTab'
	import stockPosition from 'components/trade/stock/stockPosition'
	import groupPosition from 'components/trade/stock/groupPosition'
	import GroupClearanceModal from 'components/modal/GroupClearanceModal'
  import GroupSetNameModal from 'components/modal/GroupSetNameModal'
  import GroupSetNameSuccModal from 'components/modal/GroupSetNameSuccModal'
	import RemoteDAO from 'common/remoteDAO'
	import LocalDAO from 'common/localDAO'
	import CommonUtil from 'common/common.util'
	export default {
		components: { /*子组件*/
			ToggleTab,
			'stock-position': stockPosition,
			'group-position': groupPosition,
			GroupClearanceModal,
			GroupSetNameModal,
			GroupSetNameSuccModal
		},
		data() {
			return {
				msg: '',
				userCode: '',
				dis:'1',
				menuFlag: '1',
				left: '我的个股持仓',
				right: '我的组合持仓',
        dayRate:'--',
        fundBalance:'--',
        enableBalance:'--',
				isLoadStockData: false,
			}
		},
		created() {
			var vm = this;
			vm.userCode = LocalDAO.getUserCode(); //用户ID
			vm.nickName = LocalDAO.getNickname(); //用户名
      this.menuFlag = this.$route.query.menuFlag ? this.$route.query.menuFlag : '1';          //   取得路径中传递过来的menuFlag参数
      this.dis = this.menuFlag;
			vm.getOverview()
		},
		beforeRouteEnter (to, from, next) {
     const { cleanStorage = '' } = from.query
     const extraQuery = !!cleanStorage && from.path.includes('trade')
				? { cleanStorage } : {}
     if (!!cleanStorage) {
       next(vm => {
         vm.$router.replace({ path: to.path, query: Object.assign({}, to.query, extraQuery) })
       })
     } else {
       next()
     }
   },
		mounted: function() { /*监听menuFlag*/
			this.$root.eventHub.$on('toggle', (menuFlag)=> {
				this.menuFlag = menuFlag
        let kv = {"usercode": LocalDAO.getUserCode()}
        let eventId = ''
        if (menuFlag == 1) {
          eventId = '20011'
        } else if (menuFlag == 2) {
          eventId = '20012'
        }
        if (eventId !== '') {
          TDAPP.onEvent(eventId,"",kv)
          TDAPP.send()
        }
			})
		},
		methods: {
			getOverview() {
				RemoteDAO.callJCL11103(this.userCode, response=>{
					if(response.error == "0") {
						this.totalRate = CommonUtil.toFixed(response.data.body.data[0].total_rate, 2);// 总收益率
						this.fundBalance = CommonUtil.toFixed(response.data.body.data[0].fund_balance, 2); // 模拟资产
						this.enableBalance = CommonUtil.toFixed(response.data.body.data[0].enable_balance, 2); // 可用资产
						this.dayRate = CommonUtil.toFixed(response.data.body.data[0].day_rate, 2); // 日盈亏率
						this.totalFloatProfit = CommonUtil.toFixed(response.data.body.data[0].total_floatprofit, 2); // 累计盈亏
						if(this.dayRate >=0) {
              this.dayRate = "+" + this.dayRate
						}
					}else{
            this.$store.dispatch('setTip',{text:response.data});
          }
				});
			}

		}
	}
</script>

<style scoped>
	.position-main {
		-webkit-overflow-scrolling: touch;
	}

	.overview {
		/*background-image: url(../../../assets/images/trade/monijiaoyi.png);
		background-repeat: no-repeat;
		background-position: 100% -25px;*/
	}
	.bg_position{
		position:relative;
		z-index:1;
	}
	.trade_mark_bg{
		position:fixed;
		top:19px;
		right:0;
	}
</style>
